<template>
  <div class="show-detail-container">
    <div class="back-button">
      <el-button icon="el-icon-arrow-left" type="text" size="medium" @click="goBack">
        <span style="margin-left: 5px; font-size: 16px;">返回列表</span>
      </el-button>
    </div>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton style="width: 100%" animated>
        <template slot="template">
          <el-row :gutter="30">
            <el-col :span="8">
              <el-skeleton-item variant="image" style="width: 100%; height: 400px;" />
            </el-col>
            <el-col :span="16">
              <el-skeleton-item variant="p" style="width: 50%; height: 30px; margin-bottom: 20px;" />
              <el-skeleton-item variant="text" style="width: 100%; margin-top: 16px;" />
              <el-skeleton-item variant="text" style="width: 100%;" />
              <el-skeleton-item variant="text" style="width: 80%;" />
            </el-col>
          </el-row>
        </template>
      </el-skeleton>
    </div>
    
    <div v-else-if="showDetail" class="show-detail-content">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :md="8">
          <div class="show-poster">
            <img :src="showDetail.posterUrl || require('@/assets/opera_bg1.jpg')" alt="演出海报">
            <div class="show-type">
              <el-tag :type="getTagType(showDetail.showType)">{{ showDetail.showType }}</el-tag>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="16">
          <div class="show-info">
            <h1 class="show-name">{{ showDetail.showName }}</h1>
            
            <div class="show-meta">
              <div class="meta-item">
                <i class="el-icon-time"></i>
                <span>{{ formatShowTime(showDetail.showTime) }}</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-location"></i>
                <span>{{ showDetail.showAddress }}</span>
              </div>
            </div>
            
            <div class="show-description">
              <h3>演出简介</h3>
              <p>{{ showDetail.description || '暂无简介' }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <div class="program-list">
        <h2 class="section-title">
          <span class="title-icon"><i class="el-icon-tickets"></i></span>
          节目单
        </h2>
        
        <div v-if="programLoading" class="program-loading">
          <el-skeleton style="width: 100%" animated>
            <template slot="template">
              <el-card class="skeleton-card" v-for="i in 3" :key="i">
                <div class="skeleton-card-inner">
                  <div class="skeleton-poster">
                    <el-skeleton-item variant="image" style="width: 100%; height: 100%;" />
                  </div>
                  <div class="skeleton-content">
                    <el-skeleton-item variant="p" style="width: 50%; margin-bottom: 15px;" />
                    <el-skeleton-item variant="text" style="width: 90%; margin-bottom: 10px;" />
                    <el-skeleton-item variant="text" style="width: 80%; margin-bottom: 10px;" />
                    <el-skeleton-item variant="text" style="width: 70%;" />
                  </div>
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </div>
        
        <div v-else-if="programList.length > 0" class="program-cards-container">
          <transition-group name="program-fade" tag="div" class="cards-wrapper">
            <el-card shadow="hover" v-for="(program, idx) in programList" :key="program.programId" class="program-card" :body-style="{padding: '0', height: '100%', width: '100%'}">
              <div class="program-card-inner">
                <div class="program-poster">
                  <el-image 
                    :src="program.programUrl || require('@/assets/opera_bg1.jpg')" 
                    :preview-src-list="[program.programUrl || require('@/assets/opera_bg1.jpg')]"
                    fit="cover"
                    class="program-image">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div class="program-number">{{ idx + 1 }}</div>
                </div>
                <div class="program-content">
                  <div class="program-header">
                    <div class="program-name-wrapper">
                      <h3 class="program-name">{{ program.programName }}</h3>
                      <div class="program-types">
                        <template v-if="program.programTypeId && program.programTypeId.length > 0">
                          <template v-if="typeof program.programTypeId === 'string'">
                            <el-tag 
                              v-for="(typeId, i) in program.programTypeId.split(',')" 
                              :key="i"
                              size="small" 
                              type="success" 
                              effect="light" 
                              class="type-tag"
                              style="max-width: 150px; overflow: hidden; text-overflow: ellipsis;">
                              {{ getProgramTypeById(typeId.trim()) || '默认类型' }}
                            </el-tag>
                          </template>
                          <template v-else-if="typeof program.programTypeId === 'number'">
                            <el-tag 
                              size="small" 
                              type="success" 
                              effect="light" 
                              class="type-tag">
                              {{ getProgramTypeById(String(program.programTypeId)) || '默认类型' }}
                            </el-tag>
                          </template>
                        </template>
                        <el-tag v-else size="small" type="success" effect="light" class="type-tag">
                          传统剧目
                        </el-tag>
                      </div>
                    </div>
                  </div>

                  <div class="program-performers" v-if="program.performers">
                    <span class="info-label"><i class="el-icon-user"></i> 表演者:</span>
                    <div class="performers-list">
                      <el-tag v-for="(performer, i) in program.performers.split(',')" 
                        :key="i" 
                        size="small" 
                        type="info" 
                        effect="plain"
                        class="performer-tag">
                        {{ performer }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="program-description">
                    <span class="info-label"><i class="el-icon-document"></i> 描述:</span>
                    <div class="description-text">
                      <span>{{ program.description || '暂无简介' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </transition-group>
        </div>
        
        <div v-else class="empty-program">
          <div class="empty-program-inner">
            <i class="el-icon-tickets"></i>
            <h3>暂无节目信息</h3>
            <p>该演出的节目单尚未发布，请稍后再来查看</p>
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="not-found">
      <i class="el-icon-warning-outline"></i>
      <h2>演出信息不存在</h2>
      <p>您查找的演出可能已被删除或暂未发布</p>
      <el-button type="primary" @click="goBack">返回演出列表</el-button>
    </div>
  </div>
</template>

<script>
import service from '@/utils/request';

export default {
  name: 'ShowDetailVue',
  data() {
    return {
      showId: null,
      showDetail: null,
      programList: [],
      programTypeList: [],
      loading: true,
      programLoading: true,
    };
  },
  created() {
    this.showId = this.$route.params.id;
    if (this.showId) {
      this.fetchShowDetail();
      this.fetchProgramList();
      this.fetchProgramTypes();
    }
    window.scrollTo(0, 0);
  },
  methods: {
    // 获取演出详情
    fetchShowDetail() {
      this.loading = true;
      service.get(`/api/content/show/getShowById/${this.showId}`)
        .then(res => {
          if (res.code === 200) {
            this.showDetail = res.data;
          } else {
            this.$message.error('获取演出详情失败');
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 获取节目列表
    fetchProgramList() {
      this.programLoading = true;
      service.get(`/api/content/program/getProgramListById/${this.showId}`).then(res => {
        if (res.code === 200) {
          console.log('节目列表原始数据:', res.data);
          // 按节目顺序排序
          this.programList = res.data.sort((a, b) => a.orderNo - b.orderNo);
          
          // 检查节目类型ID格式
          if (this.programList.length > 0) {
            this.programList.forEach((program, index) => {
              console.log(`节目${index+1} [${program.programName}] 的类型ID:`, program.programTypeId);
              console.log(`类型ID的数据类型:`, typeof program.programTypeId);
              
              if (program.programTypeId) {
                try {
                  const typeIds = program.programTypeId.split(',');
                  console.log(`分割后的类型ID列表:`, typeIds);
                } catch (e) {
                  console.error(`分割类型ID时出错:`, e);
                }
              }
            });
          }
          
          console.log('排序后的节目列表:', this.programList);
        } else {
          console.error('获取节目列表失败:', res.message || '未知错误');
          this.$message.error('获取节目列表失败');
        }
      }).catch(err => {
        console.error('获取节目列表出错:', err);
        this.$message.error(err.message);
      }).finally(() => {
        this.programLoading = false;
      });
    },
    
    // 获取节目类型
    fetchProgramTypes() {
      console.log('开始获取节目类型...');
      service.get('/api/content/program/getProgramTypes')
        .then(res => {
          console.log('节目类型接口返回数据:', res);
          if (res.code === 200) {
            console.log('原始类型数据:', res.data);
            this.programTypeList = res.data;
            console.log('获取到的节目类型列表:', this.programTypeList);
            
            // 检查数据格式
            if (this.programTypeList && this.programTypeList.length > 0) {
              console.log('示例类型数据:', this.programTypeList[0]);
              console.log('类型ID的数据类型:', typeof this.programTypeList[0].programTypeId);
            } else {
              console.warn('类型列表为空');
            }
          } else {
            console.error('获取节目类型失败:', res.message || '未知错误');
            this.$message.error('获取节目类型失败');
          }
        })
        .catch(err => {
          console.error('获取节目类型出错:', err);
          this.$message.error(err.message);
        });
    },
    
    // 格式化显示时间
    formatShowTime(timeString) {
      if (!timeString) return '待定';
      const date = new Date(timeString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      
      return `${year}年${month}月${day}日 ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
    },
    
    // 获取标签类型
    getTagType(showType) {
      const typeMap = {
        '传统': 'success',
        '现代': 'warning',
        '公益': 'info'
      };
      return typeMap[showType] || 'primary';
    },
    
    // 获取节目类型名称
    getProgramTypeName(typeId) {
      console.log('正在查找类型ID:', typeId);
      console.log('可用的类型列表:', this.programTypeList);
      if (!this.programTypeList || this.programTypeList.length === 0) return '加载中...';
      
      const type = this.programTypeList.find(item => item.programTypeId === typeId);
      console.log('找到的类型:', type);
      return type ? type.programTypeName : '未知类型';
    },
    
    // 直接通过ID获取类型名称
    getProgramTypeById(typeId) {
      console.log('尝试获取类型名称，ID为:', typeId);
      if (!typeId) return '未知类型';
      
      // 尝试不同的类型匹配方式
      const type = this.programTypeList.find(item => {
        const match = 
          item.programTypeId === typeId || 
          String(item.programTypeId) === String(typeId);
        console.log(`比较: ${item.programTypeId} vs ${typeId}, 结果: ${match}`);
        return match;
      });
      
      if (type) {
        console.log('找到匹配的类型:', type.programTypeName);
        return type.programTypeName;
      } else {
        console.log('未找到匹配的类型');
        return '未识别类型';
      }
    },
    
    // 返回上一页
    goBack() {
      this.$router.push({ name: 'Shows' });
    }
  }
};
</script>

<style scoped>
.show-detail-container {
  padding: 30px 15px 60px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fafafa;
  min-height: 100vh;
}

.back-button {
  margin-bottom: 25px;
}

.loading-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.show-detail-content {
  margin-bottom: 40px;
}

.show-poster {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.show-poster img {
  width: 100%;
  display: block;
}

.show-type {
  position: absolute;
  top: 10px;
  right: 10px;
}

.show-info {
  padding: 20px 0;
}

.show-name {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8rem;
  color: #303133;
}

.show-meta {
  margin-bottom: 30px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #606266;
}

.meta-item i {
  margin-right: 10px;
  font-size: 18px;
  color: #409EFF;
}

.show-description {
  margin-bottom: 30px;
}

.show-description h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEEF5;
  color: #303133;
}

.show-description p {
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
}

.section-title {
  display: flex;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e8eaec;
  color: #262626;
  font-size: 1.6rem;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, #1890ff, #36cfc9);
}

.title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  color: white;
  margin-right: 15px;
  box-shadow: 0 8px 15px rgba(24, 144, 255, 0.3);
}

.title-icon i {
  font-size: 24px;
}

.program-cards-container {
  animation: fadeIn 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.cards-wrapper {
  width: 100%;
}

.program-card {
  display: flex;
  margin-bottom: 20px;  
  margin-top: 20px;  
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
  border: none;
  padding: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.el-card.program-card {
  margin-bottom: 0;
}

.program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.program-card-inner {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 280px;
  overflow: hidden;
}

.program-poster {
  width: 280px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 10px 0 0 10px;
  flex-shrink: 0;
}

.program-poster::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
  z-index: 1;
}

.program-number {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  color: white;
  font-weight: bold;
  font-size: 1.3rem;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.program-content {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}

.program-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  transition: transform 0.5s ease;
  aspect-ratio: 1/1;
}

.program-poster:hover .program-image {
  transform: scale(1.05);
}

.program-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0f2f5;
  width: 100%;
  min-height: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.program-header::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #36cfc9, #1890ff);
  border-radius: 2px;
  margin: 0 auto;
  position: absolute;
  bottom: -1.5px;
  left: 50%;
  transform: translateX(-50%);
}

.program-name-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 15px;
}

.program-name {
  margin: 0;
  font-size: 1.5rem;
  color: #262626;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 100%;
}

.type-tag {
  margin: 0 4px 8px;
  background-color: #f6ffed !important;
  border-color: #b7eb8f !important;
  color: #52c41a !important;
  font-weight: 500;
  white-space: nowrap;
  height: 28px;
  line-height: 26px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 4px;
  transition: all 0.3s;
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(82, 196, 26, 0.15);
}

.performer-tag {
  font-weight: normal;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #606266;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 4px;
  transition: all 0.3s;
  white-space: nowrap;
  height: 28px;
  line-height: 26px;
  padding: 0 12px;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.info-label {
  display: inline-flex;
  align-items: center;
  color: #606266;
  margin-right: 12px;
  font-weight: 500;
  min-width: 70px;
  background-color: #f5f7fa;
  padding: 4px 10px;
  border-radius: 4px;
}

.info-label i {
  margin-right: 5px;
  color: #409EFF;
}

.program-performers {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 40px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.program-performers::-webkit-scrollbar {
  height: 4px;
}

.program-performers::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.program-performers::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

.program-performers::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

.performers-list {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 4px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #ddd #f1f1f1;
}

.performers-list::-webkit-scrollbar {
  display: none;
}

.program-description {
  margin: 10px 0 0;
  color: #595959;
  line-height: 1.6;
  width: 100%;
  flex-grow: 1;
  display: flex;
  min-height: 60px;
  align-items: flex-start;
  background-color: #f9f9fa;
  padding: 10px;
  border-radius: 6px;
  overflow: visible;
  max-height: none;
}

.description-text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  margin-left: 4px;
  overflow: visible;
  max-height: none;
}

.description-text span {
  display: block;
  overflow: visible;
  white-space: normal;
  line-height: 1.7;
  color: #595959;
  width: 100%;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.empty-program, .not-found {
  text-align: center;
  padding: 80px 0;
  color: #909399;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.empty-program-inner {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 60px 30px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.03);
}

.empty-program i {
  font-size: 80px;
  margin-bottom: 25px;
  color: #c0c4cc;
  opacity: 0.7;
}

.empty-program h3 {
  font-size: 1.6rem;
  color: #606266;
  margin-bottom: 15px;
}

.empty-program p {
  color: #909399;
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.6;
}

.not-found i {
  font-size: 80px;
  margin-bottom: 25px;
  color: #c0c4cc;
  opacity: 0.8;
}

.not-found h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #606266;
}

.not-found p {
  margin-bottom: 25px;
  color: #909399;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.program-fade-enter-active, .program-fade-leave-active {
  transition: all 0.5s;
}

.program-fade-enter, .program-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.program-loading {
  padding: 20px 0;
}

.skeleton-card {
  margin-bottom: 15px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}

.skeleton-card-inner {
  display: flex;
  min-height: 220px;
}

.skeleton-poster {
  width: 50%;
  position: relative;
}

.skeleton-content {
  flex: 1;
  padding: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .show-name {
    font-size: 1.5rem;
  }
  
  .program-card-inner {
    flex-direction: column;
    height: auto;
    min-height: 450px;
  }
  
  .program-poster {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 保持1:1比例 */
    border-radius: 12px 12px 0 0;
    min-height: auto;
    position: relative;
  }
  
  .program-content {
    padding: 20px;
    width: 100%;
    overflow: hidden;
  }
  
  .program-image {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    aspect-ratio: 1/1;
  }
  
  .program-header {
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .program-name-wrapper {
    flex-direction: column;
    align-items: center;
  }
  
  .program-name {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .program-types {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  
  .type-tag {
    margin: 0 3px 6px;
    font-size: 12px !important;
    height: 26px;
    line-height: 24px;
    padding: 0 8px;
  }
  
  .program-performers {
    flex-direction: row;
    align-items: center;
    padding: 0 0 5px 0;
    overflow-x: auto;
  }
  
  .performers-list {
    margin-left: 0;
    margin-top: 0;
    width: auto;
    flex: 1;
  }
  
  .info-label {
    margin-bottom: 5px;
    min-width: 60px;
    padding: 3px 8px;
    font-size: 12px;
  }
  
  .performer-tag {
    height: 26px;
    line-height: 24px;
    padding: 0 8px;
    font-size: 12px;
  }
  
  .program-description {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
  }
  
  .description-text {
    margin-left: 0;
    margin-top: 5px;
    width: 100%;
  }
  
  .skeleton-card-inner {
    flex-direction: column;
  }
  
  .skeleton-poster {
    width: 100%;
    height: 200px;
  }
  
  .not-found i,
  .empty-program i {
    font-size: 60px;
    margin-bottom: 20px;
  }
  
  .not-found h2,
  .empty-program h3 {
    font-size: 1.4rem;
  }
  
  .empty-program-inner {
    padding: 40px 20px;
  }
}
</style> 